<template>
	<div class="conPpageBox">
		<div class="qiandaoBox">
			<div class="qiandaoBoxTit">{{$t('indexTitle.title282')}}</div>
			<div class="qiandaoBoxBor">
				<div class="qiandaoBoxBorIt">{{$t('indexTitle.title283')}}{{qianbaoList.length}}{{$t('indexTitle.title257')}}</div>
				<div class="qiBoxBorItTow"><span class="jiangjin">{{$t('indexTitle.title284')}}</span>
					<span class="jiangjinTow">{{zongjiangjinNum}} HKD</span>
				</div>
			</div>
			<div class="zhongbiBox">
				<div class="">{{$t('indexTitle.title285')}}</div>
				<img src="../../assets/images/usdt.webp" alt="">
			</div>
		</div>
		<div class="swiper" id="swiper1" :options="mySwiper">
			<div class="swiper-wrapper">
				<div class="heziBoxIt swiper-slide " v-for="(it,index) in qianbaoList" :key="index">
					<div class="heziBoxItTow">
						<div class="heziBoxItLine"
							:class="{heziBoxItLineTow:it.tianshu==chongzhilianInfo.qiandaotianshu+1}"></div>
						<div class="baoxiangkaiHH">
							<img v-if="it.tianshu==chongzhilianInfo.qiandaotianshu+1" alt="treasure-open"
								class="baoxiangkai" data-src="../../assets/img/qiandaoone.webp"
								src="../../assets/img/qiandaoone.webp" lazy="loaded">
							<img alt="treasure-close" class="baoxiangkaiddd" v-else
								data-src="../../assets/img/qiandaoTow.webp" src="../../assets/img/qiandaoTow.webp"
								lazy="loaded">
						</div>
						<div class="heziTow">
							<div class="heziTowBox">
								<div class="heziTowBoxDay">
									{{$t('indexTitle.title256')}}{{it.tianshu}}{{$t('indexTitle.title257')}}
								</div>
								<div class="heziTowBoxNum">
									+{{it.money}}<span class="">HKD</span>
								</div>
								<div class="qiandaotiaojian">{{$t('indexTitle.title278')}}</div>
								<div class="dangriBox">
									<div class="dangriBoxTitle">{{$t('indexTitle.title265')}}</div>
									<div class="dangriBoxRight">
										<div><span class="">{{chongzhilianInfo.chongzhi}}</span> /
											{{it.chongzhilian}}
										</div>
										<div class="dangriBoxRightss">HKD</div>
									</div>
								</div>
								<div class="dangriBox"
									v-if="chongzhilianInfo.maliang==it.malian||chongzhilianInfo.maliang>it.malian">
									<div class="dangriBoxTitle">{{$t('indexTitle.title266')}}</div>
									<div class="dangriBoxRightTow">{{$t('indexTitle.title279')}}</div>
								</div>
								<div class="dangriBox" v-else>
									<div class="dangriBoxTitle">{{$t('indexTitle.title266')}}</div>
									<div class="dangriBoxRight">
										<div><span class="">{{chongzhilianInfo.maliang}} </span>/
											{{it.malian}}
										</div>
										<div class="dangriBoxRightss">HKD</div>
									</div>
								</div>
							</div>
							<div class="renzhengBox" v-if="!it.dabiao">
								<div>{{$t('indexTitle.title280')}}</div>
								<div>{{$t('indexTitle.title281')}}</div>
							</div>
							<div class="renzhengBoxdd" v-if="it.dabiao">
							</div>
							<div class="dafad">
								<el-button class="elButton"
									v-if="it.tianshu==chongzhilianInfo.qiandaotianshu+1&&it.dabiao&&!chongzhilianInfo.qiandao"
									@click="getqiandao(it)">{{$t('indexTitle.title261')}}</el-button>
								<el-button class="elButton asdfas"
									v-if="it.tianshu<chongzhilianInfo.qiandaotianshu+1&&it.dabiao">{{$t('indexTitle.title262')}}</el-button>
								<el-button class="elButton asdfas"
									v-if="it.tianshu>chongzhilianInfo.qiandaotianshu+1&&it.dabiao||it.tianshu==chongzhilianInfo.qiandaotianshu+1&&it.dabiao&&chongzhilianInfo.qiandao">{{$t('indexTitle.title277')}}</el-button>
								<el-button v-if="!it.dabiao"
									class="elButton asdfas">{{$t('indexTitle.title272')}}</el-button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<loadingFour :msgText="msgTextTow" v-if="isShowLoadingTeow" @closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>
<script>
	import Swiper from 'swiper';
	import loadingFour from '../../components/loadingFour.vue';
	import {
		qiandaoTianshuList,
		qiandao,
		chongzhilian,
		renwuList,
		renwuSubmit
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				tab: 0,
				close: true,
				qianbaoList: [],
				chongzhilianInfo: {},
				renWuList: [],
				mySwiper: {},
				zongjiangjinNum: 0,
				msgTextTow: "",
				isShowLoadingTeow: false
			}
		},
		components: {
			loadingFour
		},
		created() {

		},
		mounted() {
			this.getqiandaoTianshuList();
			this.getchongzhilian();
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			getqiandaoTianshuList() {
				let data = {}
				qiandaoTianshuList(data).then((res) => {
					if (res.status.errorCode == 0) {
						res.data.forEach((it, index) => {
							this.zongjiangjinNum = this.zongjiangjinNum + parseFloat(it.money)
						})
						this.qianbaoList = res.data
						this.mySwiper = new Swiper('#swiper1', {
							direction: "horizontal",
							speed: 600,
							loop: true,
							autoplay: false,
							observer: true,
							observeParents: true,
							effect: "coverflow",
							slidesPerView: "auto",
							centeredSlides: true,
							coverflowEffect: {
								rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
								stretch: -5, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
								depth: 20, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
								modifier: 5,
								slideShadows: false, //开启slide阴影。默认 true。
							},
							spaceBetween: 10,
						});

					} else {
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
							setTimeout(()=>{
								this.isShowLoadingTeow = false;
							},2000)
						// this.$message.error(res.status.msg);
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			getchongzhilian() {
				let data = {}
				chongzhilian(data).then((res) => {
					if (res.status.errorCode == 0) {
						this.chongzhilianInfo = res.data
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
							setTimeout(()=>{
								this.isShowLoadingTeow = false;
							},2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			getqiandao(it) {
				let data = {
					data: it.money
				}
				qiandao(data).then((res) => {
					console.log(res);
					if (res.status.errorCode == 0) {
						this.chongzhilianInfo = {};
						this.getchongzhilian();
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
							setTimeout(()=>{
								this.isShowLoadingTeow = false;
							},2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			changetab(e) {
				this.tab = e
			},
			goBack() {
				this.$router.go(-1)
			}
		}
	}
</script>



<style scoped>
	* {
		box-sizing: border-box;
	}

	.conPpageBox {
		width: 100%;
		overflow: hidden;
	}

	.qiandaoBox {
		width: 100%;
	}

	.qiandaoBoxTit {
		font-size: 20px;
		color: #333;
		text-align: center;
	}

	.qiandaoBoxBor {
		width: 90%;
		margin: 20px auto;
		height: 85px;
		padding: 15px 0px;
		box-sizing: border-box;
		border: 1px solid rgba(102, 102, 102, 0.5);
		background-color: rgba(39, 39, 41, 0.3);
		border-radius: 37px;
	}

	.qiandaoBoxBorIt {
		text-align: center;
		color: #ffffff;
		font-size: 14px;
	}

	.qiBoxBorItTow {
		text-align: center;
		color: #ffffff;
		font-size: 14px;
		margin-top: 10px;
	}

	.jiangjinTow {
		font-size: 20px;
		color: #9f855b;
		margin-left: 15px;
	}

	.zhongbiBox {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #999;
	}

	.zhongbiBox img {
		width: 25px;
		height: 25px;
		margin-left: 15px;
	}

	.heziBox {
		width: 100%;
		margin-bottom: 20px;
	}

	.swiper {
		width: 100%;
		margin-bottom: 20px;
	}

	.swiper-slide {
		position: relative;
	}

	.heziBoxIt {
		width: 335px !important;
		position: relative;
		margin: 70px auto 0;
		/* border: 1px solid #fcfcfc33; */
		border: 1px solid #99999933;
		border-radius: 20px;
	}

	.heziBoxItTow {}

	.heziBoxItLine {
		background-color: #999999;
		width: 100%;
		height: 20px;
		border-radius: 20px 20px 0 0;
	}

	.heziBoxItLineTow {
		background-color: linear-gradient(90deg, #feef9c 0%, #e6b811 100%);
	}

	.baoxiangkaiHH {
		position: absolute;
		top: -60px;
		left: 50%;
		transform: translateX(-50%);
	}

	.baoxiangkai {
		width: 130px;
		height: 130px;
		animation: scale-breathe 2s infinite linear;
	}

	.baoxiangkaiddd {
		width: 140px;
		height: 140px;
	}

	@keyframes scale-breathe {
		0% {
			transform: scale(1);
		}

		25% {
			transform: scale(1.1);
		}

		75% {
			transform: scale(0.9);
		}

		100% {
			transform: scale(1);
		}
	}

	.heziTow {
		width: 100%;
		padding: 50px 0px 25px;
		box-sizing: border-box;
	}

	.heziTowBox {
		width: 100%;
	}

	.heziTowBoxDay {
		color: #333;
		text-align: center;
		font-size: 18px;
	}

	.heziTowBoxNum {
		text-align: center;
		color: #9f855b;
		font-size: 20px;
		margin: 10px 0px 15px;
	}

	.heziTowBoxNum span {
		margin-left: 5px;
	}

	.qiandaotiaojian {
		color: #333;
		text-align: center;
		font-size: 15px;
	}

	.dangriBox {
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 15px auto 0;
	}

	.dangriBoxTitle {
		color: #333;
		font-size: 15px;
	}

	.dangriBoxRight {
		color: #333;
		display: flex;
		align-items: center;
		font-size: 15px;
	}

	.dangriBoxRight span {
		color: #9f855b;
	}

	.dangriBoxRightss {
		margin-left: 5px;
	}

	.dangriBoxRightTow {
		color: #38c522;
		font-size: 15px;
	}

	.renzhengBox {
		text-align: center;
		margin: 30px 0px 15px;
		color: #ff4343;
		font-size: 15px;
	}

	/deep/ .el-button {
		background-color: #5235ff;
		border-radius: 45px;
		color: #fff;
		font-size: 12px;
		padding: 3px 12px;
		background-image: none;
		box-shadow: none;
		height: 45px;
		min-width: 120px;
	}

	/deep/ .asdfas {
		background-color: #939698;
	}

	.dafad {
		display: flex;
		justify-content: center;
	}
</style>